<!--快递员的页面-->
<!DOCTYPE html>
<html>
	<head>
		<title>取货助手 -- 快件e栈服务平台</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
		<link href="css/normalize.css" type="text/css" rel="stylesheet"/>
		<link href="css/common.css" type="text/css" rel="stylesheet"/>
		<script src="js/jquery.min.js" type="text/javascript"></script>
		<script src="js/common.js" type="text/javascript"></script>
		<script src="js/notice.js" type="text/javascript"></script>
		<script src="js/regexp.js" type="text/javascript"></script>
		<script src="js/jweixin-1.2.0.js" type="text/javascript"></script>
		<script src="layer/layer.js"></script>
		<script type="text/javascript">
			$.ajax({
				url: "wxconf.do",
				type: "GET",
				data: "xurl=" + location.href.split('#')[0],
				success: function (data) {
					// data = JSON.parse(data);
					wx.config({
						// 开启调试模式,调用的所有api的返回值会在客户端alert出来，
						// 若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						debug: false,
						appId: data.appid, // 必填，公众号的唯一标识
						timestamp: data.timestamp, // 必填，生成签名的时间戳
						nonceStr: data.nonceStr, // 必填，生成签名的随机串
						signature: data.signature,// 必填，签名
						jsApiList: ['startRecord', 'stopRecord', 'scanQRCode', 'playVoice', 'uploadVoice', 'downloadVoice', 'onVoiceRecordEnd', 'translateVoice'
							, 'downloadVoice', 'onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填，需要使用的JS接口列表
					});
				}, error: function () {

				}
			});

			wx.ready(function () {
				// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，
				// 所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。
				// 对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
				$("#scanQRCodeBtn").click(x1);
			});
			wx.error(function (res) {
				// config信息验证失败会执行error函数，如签名过期导致验证失败，
				// 具体错误信息可以打开config的debug模式查看，
				// 也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
				alert("扫描错误")
			});
			var userPhone = null;

			function x1() {
				wx.scanQRCode({
					needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
					scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
					success: function (res) {
						var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
						var code = null;

						if (result.indexOf("express_") === 0) {
							// 表示的是扫到了一个快递的取件码，
							// 需要按照取件码的方式进行查询
							code = result.substring(8);
							// 把扫到的码放进输入框中
							$("#expPickUserId").val(code);
						} else if (result.indexOf("userPhone_") === 0) {
							// 表示的是扫到了一个用户的手机号码
							userPhone = result.substring(10);
							// 与后台进行交互
							getExpressList();
						}

					}
				});
			}

			// 这是快递员的部分
			// 与后台进行交互
			function getExpressList() {
				var windowId = layer.load();
				$.getJSON("/wx/userExpressList.do", {userPhone: userPhone}, function (data) {
					layer.close(windowId);
					if (data.status == -1) {
						// 抖来抖去的弹窗信息
						layer.msg("未查询到相关快递！", function () {
						});
					} else {
						var list = data.data;

						for (var i = 0; i < list.length; i++) {
							var item = "<div class=\"expInfoCont status1\">\n" +
								"\t\t\t<table>\n" +
								"\t\t\t\t<tr>\n" +
								"\t\t\t\t\t<td>快递公司：</td><td>" + list[i].company + "</td>\n" +
								"\t\t\t\t</tr>\n" +
								"\t\t\t\t<tr>\n" +
								"\t\t\t\t\t<td>快递单号：</td><td>" + list[i].number + "</td>\n" +
								"\t\t\t\t</tr>\n" +
								"\t\t\t\t<tr>\n" +
								"\t\t\t\t\t<td>到件时间：</td><td>" + list[i].inTime + "</td>\n" +
								"\t\t\t\t</tr>\n" +
								"\t\t\t\t<tr>\n" +
								"\t\t\t\t\t<td>取件码：</td><td>" + list[i].code + "</td>\n" +
								"\t\t\t\t</tr>\n" +
								"\t\t\t</table>\n" +
								"\t\t\t<div class=\"btns\">\n" +
								"\t\t\t\t<button class=\"btn-success\" onclick=\"updateStatus('" + list[i].code + "', 0)\">确认收货</button>\n" +
								"\t\t\t</div>\n" +
								"\t\t</div>";
							// 通过jQuery进行页面的拼接以及追加
							// $("#expUserInfoCont").append(item);
							// 粗心大意！！！！！！！！
							$("#expUserInfoCont").append($(item));
						}

					}
				}, "JSON");
			}

			// 根据取件码进行收货确认
			function updateStatus(code, type) {
				// layer.alert("点击的取件码是：" + code);
				var windowId = layer.load();
					$.getJSON("/wx/updateStatus.do",{code:code},function (data) {
						layer.close(windowId);
						if (data.status == 0){
							layer.alert(data.result);
						}else if (data.status == -1){
							layer.alert(data.result);
						}

						// 清空此div中的所有内容
						$("#expUserInfoCont").html("");
						if (type == 0){
							// 然后重新获取一次
							getExpressList();
						}
					});

			}

			function find() {
				var windowId = layer.load();
				var code = $("#expPickUserId").val();
				$.getJSON("/wx/findExpressByCode.do",{code:code},function (data) {
					layer.close(windowId);
					layer.msg(data.result);
					if (data.status == 0){
						$("#expUserInfoCont").html("");
						// 查询成功
						var express = data.data;

						var item = "<div class=\"expInfoCont status1\">\n" +
								"\t\t\t<table>\n" +
								"\t\t\t\t<tr>\n" +
								"\t\t\t\t\t<td>快递公司：</td><td>" + express.company + "</td>\n" +
								"\t\t\t\t</tr>\n" +
								"\t\t\t\t<tr>\n" +
								"\t\t\t\t\t<td>快递单号：</td><td>" + express.number + "</td>\n" +
								"\t\t\t\t</tr>\n" +
								"\t\t\t\t<tr>\n" +
								"\t\t\t\t\t<td>到件时间：</td><td>" + express.inTime + "</td>\n" +
								"\t\t\t\t</tr>\n" +
								"\t\t\t\t<tr>\n" +
								"\t\t\t\t\t<td>取件码：</td><td>" + express.code + "</td>\n" +
								"\t\t\t\t</tr>\n" +
								"\t\t\t</table>\n" +
								"\t\t\t<div class=\"btns\">\n" +
								"\t\t\t\t<button class=\"btn-success\" onclick=\"updateStatus('" + express.code + "', 1)\">确认收货</button>\n" +
								"\t\t\t</div>\n" +
								"\t\t</div>";

						$("#expUserInfoCont").append($(item));
					}else {
						// 取件码异常
						layer.msg("用户无快递",function(){});
					}


				})
			}

			/*function updateStatus2() {
				var windowId = layer.load();
				var code = $("#expPickUserId").val();

				$.getJSON("/wx/updateStatus.do",{code:code},function (data) {
					layer.close(windowId);
					if (data.status == 0){
						layer.alert(data.result);
					}else if (data.status == -1){
						layer.alert(data.result);
					}

				})

			}*/


		</script>

		<style type="text/css">
			.expPickCont {
				padding-bottom: 20px;
			}

			.expPickCont .expPickIcon {
				width: 15%;
				margin: 0 auto;
				text-align: center;
			}

			.expPickCont .expPicTitle {
				text-align: center;
				font-weight: bold;
			}

			.searchInfoBtn {
				width: 90%;
				margin: 0 auto;
				text-align: center;
				line-height: 46px;
				border-radius: 23px;
				background: #1f72ff;
				color: #fff;
				font-weight: bolder;
			}

			.expUserInfoCont {
				width: 90%;
				margin: 20px auto 20px;
				font-size: 14px;
			}

			.expUserInfoNull {
				width: 100%;
				line-height: 150px;
				text-align: center;
				color: #888888;
				display: none;
			}

			.expInfoCont {
				width: 100%;
				box-sizing: border-box;
				background-color: #fff;
				border-radius: 10px;
				padding: 30px;
			}

			.expInfoCont td:nth-of-type(1) {
				text-align: right;
				height: 2em;
				line-height: 2em;
			}

			.expInfoCont > .btns {
				border-top: 1px dashed #666;
				padding-top: 20px;
				text-align: right;
				margin-top: 10px;
			}

			.btn-success {
				padding: 5px 15px;
				color: #fff;
				background: #2F9925;
				border: 1px solid #fff;
				border-radius: 5px;
			}

			.status2 {
				position: relative;
			}

			.status2_bg {
				position: absolute;
				left: 0px;
				top: 0px;
				bottom: 0px;
				right: 0px;
			}

			.status2_bg > img {
				width: 30%;
				margin: 0 auto;
				margin-top: 50px;
				opacity: 0.5;

			}


			.status1 {
				display: auto;
			}

			.status2 {
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<div class="headerNav">
				<div class="headerNavTop">
					<div class="headerNavIcon headerNavIconOut"><span></span><span></span></div>
				</div>
				<div class="headerNavCont">
					<a href="../index.html">快递首页</a>
					<a href="../userhome.html">个人中心</a>
					<a href="../delivery.html">送货上门</a>
					<a href="../lazyboard.html">懒人排行</a>
					<a href="../expassistant.html">快递助手</a>
				</div>
			</div>

			<div class="expPickCont">
				<div class="expPickIcon">
					<img src="images/pickexpicon.png" width="100%">
				</div>
				<p class="expPicTitle">确认取货</p>

				<div class="expPickInput">
					<form>
						<input id="PageContext" type="hidden" value="${pageContext.request.contextPath}"/>
						<input id="wxCode" type="hidden" value="${wxCode}"/>
						<div class="userInputCont">
							<div class="inputTypeCont">
								<div class="inputTitle">取货码</div>
								<input type="text" id="expPickUserId" class="commonInputFunc" name="username"
									   placeholder="请输入取货码">
								<div class="commonFuncBtnScan" id="scanQRCodeBtn"></div>
							</div>
						</div>
					</form>
					<div class="searchInfoBtn" id="searchInfoBtn" onclick="find()">查找信息</div>
				</div>
			</div>

			<div class="expUserInfoCont" id="expUserInfoCont">
				<div class="expUserInfoNull">
					暂无查到相关信息
				</div>

			</div>

		</div>

	</body>
</html>